import React, { useEffect } from 'react';
// import echarts from 'echarts';
// import * as echarts from 'echarts/lib/echarts';
import * as echarts from 'echarts';

// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入饼状图
// import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/graph';
// 引入标题和提示框
import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';

import ReactDOM from 'react-dom';
import { IRelationshipEcharts } from './type';
import { getColorTextLoadMap } from '@/utils';

const RelationshipEcharts: React.FC<IRelationshipEcharts> = ({
  linkList, //关系列表
  contacterList, //联系人数据
  peopleName, // 任务展示名字字段
  primaryName, //关系中第一联系人名字字段
  secondaryName, //关系中第二联系人名字字段
  linkName, //关系名字字段
  linkType, //关系名字 id 字段
  linkOnClick, //点击关系回调
}) => {
  let contacterRelationRef: any = React.useRef();

  useEffect(() => {
    let nodes: Record<string, any>[] = [];
    let links: Record<string, any>[] = [];
    if (contacterList?.length > 0 || linkList?.length > 0) {
      contacterList?.forEach((itemNode: any, index: number) => {
        nodes?.push({
          category: 1,
          name: itemNode?.[peopleName],
        });
      });
      linkList?.forEach((itemLink: any) => {
        links?.push({
          ...itemLink,
          source: itemLink?.[primaryName], //联系人1
          target: itemLink?.[secondaryName], //联系人2
          name: itemLink?.[linkName]?.includes('||')
            ? getColorTextLoadMap(itemLink?.[linkName])?.colorText
            : itemLink?.[linkName], //关系名字
          id: itemLink?.id,
          linkId: itemLink?.[linkType],
        });
      });
    }
    getOptionData(nodes, links);
  }, [contacterList, linkList]);

  /**
   * 处理显示名字的 提示框
   * @param text  需要处理的字符
   * @param type  是节点还是关系
   */
  const tipNodeLinkName = (text: string, type: boolean) => {
    let tipText: string = '';
    if (text?.includes('-')) {
      if (type) {
        tipText = `姓名：${text?.split('-')?.[0]} <br/> 手机：${
          text?.split('-')?.[1]
        }`;
      } else {
        tipText = `${text?.split('-')?.[0]}`;
      }
    } else {
      tipText = text;
    }
    return tipText;
  };

  /**
   * 处理节点多余显示
   * @param text  处理的字符
   */
  const handleNodeMore = (text: string) => {
    let newText: string = '';
    if (text?.includes('-')) {
      newText = text?.split('-')?.[0];
    } else {
      newText = text;
    }
    if (newText && newText?.length > 4) {
      let str = newText?.substring(0, 3) + '...';
      return str;
    } else {
      return newText;
    }
  };

  /**处理图 */
  const getOptionData = (
    nodes: Record<string, any>[],
    links: Record<string, any>[],
  ) => {
    let contacterRelationOption: any = {
      tooltip: {
        trigger: 'item',
        extraCssText:
          'height:auto;background-color:rgba(0,0,0,0.5);color:#fff;border:0px', //提示框样式
        formatter: (params: any) => {
          if (params.dataType == 'node') {
            return tipNodeLinkName(params?.data?.name, true);
          } else {
            return `${tipNodeLinkName(
              params?.data?.source,
              false,
            )} > ${tipNodeLinkName(params?.data?.target, false)} <br/> 关系：${
              params?.data?.name
            }`;
          }
        },
      },
      series: [
        {
          type: 'graph',
          layout: 'force', //初始化为力引导图
          name: '人物关系',
          force: {
            //力引导图配置
            repulsion: 550, //节点之间的斥力因子 值越大斥力越大
            edgeLength: [40, 400], //边的两个节点质检的距离,这个距离也会手 repulsion影响,值越小,长度越长
            gravity: 0.2, //节点受到向中心的引力因子,值越大越往中心点靠拢
          },
          categories: [
            {
              name: '人物',
            },
          ],
          edgeSymbol: ['', 'arrow'], //设置线条起点和终点的样式  ['circle', 'arrow'] :['圆圈', '箭']
          symbolSize: 55, //节点大小
          label: {
            //图形上的文字配置
            show: true, //是否显示
            color: '#fff', //颜色
            formatter: (params: any) => {
              //处理回调
              return handleNodeMore(params?.data?.name);
            },
          },
          edgeLabel: {
            //线条上的标签
            show: true,
            color: 'red',
            formatter: (params: any) => {
              return params.data.name;
            },
          },
          lineStyle: {
            //线条的样式
            // type: 'curve',
            // curveness: 0.2, //线的弧度
          },
          roam: true, // 开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          draggable: true, // 节点是否可拖拽
          //focusNodeAdjacency: true, // 鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          data: nodes?.length > 0 ? nodes : [],
          links: links?.length > 0 ? links : [],
        },
      ],
    };
    // 图表显示容器
    let contacterRelation: any = ReactDOM.findDOMNode(
      contacterRelationRef?.current,
    );
    // 图表初始化
    let relationChart = echarts.init(contacterRelation);
    // 进行图表配置
    relationChart.setOption(contacterRelationOption);

    // 图表监听点击事件
    relationChart?.on('click', (params: any) => {
      if (params?.dataType == 'edge') {
        linkOnClick(params?.data);
      }
    });
  };

  return (
    <div
      ref={contacterRelationRef}
      style={{ width: '100%', height: '100%' }}
    ></div>
  );
};
export default RelationshipEcharts;
